<template>
  <view class="m-auto w-340px p-10px bg-white rounded-lg shadow-lg">
    <view class="flex justify-between items-center">
      <view>
        <view class="flex items-center justify-center">
          <view class="relative mr-2">
            <image class="w-60 h-60 rounded-full bg-gray-200" mode="scaleToFill"
              :src="userData.avatar" />
            <image class="absolute -right-6 -top-3 w-24 h-24 rounded-full" mode="scaleToFill"
              src="./assets/huangzuan.png" />
          </view>
          <text class="text-sm text-[#3d8944] font-bold">{{ userData.name }}</text>
        </view>
      </view>

      <view>
        <view class="flex items-center justify-center flex-col">
          <text class="text-sm text-gray-600 cursor-pointer" @tap="changeUser">被监护人[切换]</text>
          <text class="text-gray-600 text-sm block">{{ otherInfo }}</text>
        </view>
      </view>

      <view>
        <view class="flex-1 flex items-center justify-center flex-col" @click="toHealthCode">
          <image class="w-50 h-50" mode="aspectFit" src="./assets/ewm.png" />
          <text class="text-center text-gray-600 text-sm">诊疗卡</text>
        </view>
      </view>

      <view>
        <view class="flex items-center justify-center flex-nowrap" @click="toHealthCard">
          <image class="w-40 h-40" mode="aspectFit" src="./assets/jkdn.png" />
          <text class="text-[#3d8944] text-sm">健康档案</text>
        </view>
      </view>
    </view>
    
    <view class="flex justify-between mt-2 text-gray-600">
      <text>余额：{{ userData.balance }}</text>
      <text>积分：{{ userData.points }}</text>
      <text>兑换券：{{ userData.vouchers }}张</text>
    </view>

    <view class="flex justify-between mt-2 text-gray-600">
      <view class="flex justify-center items-center" @click="toHealthRole">
        <view class="w-60 h-60 flex justify-center items-center bg-gray-200 rounded-[8rpx]">
          <view class="text-[#4caf50] text-[24rpx]">👤</view>
        </view>
        <view class="ml-2">
          <view>{{ healthName || '管家' }}</view>
          <view class="text-xs text-gray-300">健康管家</view>
        </view>
      </view>
      
      <view class="flex justify-center items-center flex-col items-center" @click="toCallCenter">
        <image class="w-48 h-48" src="./assets/qywx.png" mode="scaleToFill" />
        <text class="text-sm">专属服务群</text>
      </view>
      
      <view class="flex justify-center flex-col items-center" @click="toHistory">
        <image class="w-48 h-48" src="./assets/weixin.png" mode="scaleToFill" />
        <text class="text-sm">历史记录</text>
      </view>
    </view>
    
    <!-- 健康管家二维码弹窗 -->
    <nut-popup v-model:visible="showHealthRolePopup" position="center" :style="{ padding: '40rpx' }">
      <view class="relative bg-white rounded-lg p-[30rpx]">
        <!-- 关闭按钮 -->
        <view 
          class="absolute top-0 right-0 w-[30rpx] h-[30rpx] flex items-center justify-center cursor-pointer"
          @click="showHealthRolePopup = false"
        >
          <view class="text-[20rpx] text-[#999]">×</view>
        </view>
        
        <view class="flex flex-col items-center">
          <image 
            class="w-[400rpx] h-[400rpx] mb-[20rpx]" 
            src="https://anfine.huasun-healthcare.com/api/sys/common/static/temp/30_1754033053305.jpg" 
            mode="aspectFit" 
            show-menu-by-longpress
          />
          <text class="text-[28rpx] text-gray-700 text-center">长按联系你的健康管家！</text>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟用户数据
const userData = ref({
  name: '江思志',
  avatar: './assets/ren.png',
  balance: 0,
  points: 0,
  vouchers: 0
});

const otherInfo = ref('江小二男 12岁');
const healthName = ref('安安');
const showHealthRolePopup = ref(false);

// 事件处理函数
const changeUser = () => {
  console.log('切换被监护人');
  // 实际项目中这里可以显示选择器或跳转页面
};

const toHealthCode = () => {
  console.log('查看诊疗卡');
  // 实际项目中这里可以显示二维码或跳转页面
};

const toHealthCard = () => {
  console.log('查看健康档案');
  // 实际项目中这里可以跳转到健康档案页面
};

const toHealthRole = () => {
  console.log('联系健康管家');
  showHealthRolePopup.value = true;
};

const toCallCenter = () => {
  console.log('专属服务群');
  // 实际项目中这里可以跳转到客服页面
};

const toHistory = () => {
  console.log('历史记录');
  // 实际项目中这里可以跳转到历史记录页面
};
</script>

